import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

import '../common/styles.dart';
import '../provider/user_provider.dart';
import '../router/app_router.dart';
import '../router/router_utils.dart';

class ItemModel {
  final String label;
  final String value;

  ItemModel({required this.label, required this.value});
}

class IndexPage extends StatefulWidget {
  const IndexPage({Key? key}) : super(key: key);

  @override
  State<IndexPage> createState() => IndexPageState();
}

class IndexPageState extends State<IndexPage> {
  String _selectedRole = '角色切换'; // 初始选择值
  List<ItemModel> _roles = []; // 初始化角色列表

  @override
  void initState() {
    super.initState();
    _roles = roles(context); // 初始化角色列表
  }

  @override
  void dispose() {
    super.dispose();
  }

  Future<void> onJoin(ItemModel item) async {
    RouterUtils.toRouter(context, RouterValues.audio, 
      arguments:{"type":"detail", "label": item.label, "value": item.value}
    );
  }

  List<ItemModel> roles(BuildContext context) {
    return [
      ItemModel(label: "数字人1", value: "1"),
      ItemModel(label: "数字人2", value: "2"),
      ItemModel(label: "数字人3", value: "3"),
    ];
  }

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Consumer<UserProvider>(
        builder: (context, vm, _) {
          return Stack(
            fit: StackFit.expand,
            children: [
              // 使用图片作为背景
              Positioned.fill(
                bottom: 0,
                child: Container(
                  height: height, // 调整图片高度以适应不同设备
                  width: width,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/images/index_bg.png'), // 替换为你的图片路径
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),

              // 定位角色选择下拉框
              Positioned(
                top: 62.w, // 从顶部偏移
                left: (width - 120.w) / 2, // 水平居中
                child: _changeText(context, vm),
              ),
            ],
          );
        },
      ),
    );
  }

  Widget _changeText(BuildContext context, UserProvider vm) {
    return GestureDetector(
      onTap: () {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: const Text('角色切换'),
              content: DropdownButton<ItemModel>(
                value: _roles.firstWhere((item) => item.value == _selectedRole, orElse: () => _roles.first),
                hint: const Text('角色切换'),
                onChanged: (ItemModel? newValue) {
                  if (newValue != null) { // 添加检查以避免使用 null
                    setState(() {
                      _selectedRole = newValue.label;
                      Navigator.of(context).pop(); // 先关闭弹框
                    });

                    // 在 setState 外部调用 onJoin
                    onJoin(newValue);                  
                  }
                },
                items: _roles.map((ItemModel value) {
                  return DropdownMenuItem<ItemModel>(
                    value: value,
                    child: Text(value.label),
                  );
                }).toList(),
              ),
            );
          },
        );
      },
      child: Container(

        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              _selectedRole,
              style: TextStyle(fontSize: 18.sp, color: Styles.black3Color, fontWeight: FontWeight.bold),
            ),
            Image.asset(
              "assets/images/roleChange.png",
              width: 16.w,
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
    );
  }
}